<template>
  <view class="container">
    <!-- 加载状态 -->
    <view v-if="loading" class="loading">加载中...</view>

    <!-- 错误提示 -->
    <view v-if="error" class="error" @click="retry">{{ error }}（点击重试）</view>

    <!-- 商品列表 -->
    <scroll-view 
      v-show="!loading && !error" 
      scroll-y 
      style="height: 100vh; padding: 20rpx;"
    >
      <view class="order-list">
        <!-- 推荐使用唯一 ID，比如订单ID -->
        <view v-for="(item, index) in orderList" :key="item.orderNo" class="order-card">
          <image :src="item.sku.skuImage" mode="aspectFill" class="sku-image" />
          <view class="order-details">
            <text class="name">订单编号：{{ item.orderNo }}</text>
            <text class="info-field">金额：￥{{ (item.sku.price * item.vmDayRent) / 100 }}</text>
            <text class="info-field">支付状态：{{ getPayStatusText(item.payStatus) }}</text>
			<text class="info-field">租赁天数：{{item.vmDayRent}}天</text>
           
          </view>
        </view>
      </view>
    </scroll-view>

    <!-- 分页控制 -->
    <view class="pagination-container">
      <view class="pagination">
        <button @click="prevPage" :disabled="queryParams.pageNum <= 1">上一页</button>
        <text>第 {{ queryParams.pageNum }} 页 / 共 {{ totalPages }} 页</text>
        <button @click="nextPage" :disabled="!hasMore || loading">下一页</button>
      </view>
    </view>
  </view>
</template>
<script>
import { listOrder } from '@/api/order'

export default {
  data() {
    return {
      loading: false,
      error: null,
      queryParams: {
        pageNum: 1,
        pageSize: 4 // 每页显示4条记录
      },
      total: 0,
      orderList: [],
      payStatusOptions: {
        0: '未支付',
        1: '支付完成',
        2: '退款中',
		3: '完成退款'
      },
      totalPages: 0,
      hasMore: true
    }
  },
  onLoad() {
    this.getList(this.queryParams.pageNum)
  },
  methods: {
    getList(pageNum = 1) {
      this.loading = true
      this.error = null

      // 更新当前页码
      this.queryParams.pageNum = pageNum

      listOrder(this.queryParams)
        .then(res => {
          if (res.code === 200) {
            const newItems = res.rows || []
            this.orderList = newItems
            this.total = res.total
            this.totalPages = Math.ceil(this.total / this.queryParams.pageSize)
            this.hasMore = this.queryParams.pageNum < this.totalPages
          } else {
            this.error = '获取订单列表失败'
          }
        })
        .catch(err => {
          console.error('请求异常:', err)
          this.error = '网络异常，请检查连接'
        })
        .finally(() => {
          this.loading = false
        })
    },
    prevPage() {
      if (this.queryParams.pageNum > 1) {
        this.getList(this.queryParams.pageNum - 1)
      }
    },
    nextPage() {
      if (!this.loading && this.hasMore) {
        this.getList(this.queryParams.pageNum + 1)
      }
    },
    getPayStatusText(status) {
      return this.payStatusOptions[status] || '未知状态'
    }
  }
}
</script>
<style scoped>
.order-list {
  display: flex;
  flex-direction: column;
  gap: 20rpx;
}

.order-card {
  display: flex;
  background-color: #fff;
  border-radius: 16rpx;
  overflow: hidden;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
  padding: 20rpx;
}

.sku-image {
  width: 180rpx;
  height: 180rpx;
  border-radius: 12rpx;
  margin-right: 20rpx;
}

.order-details {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.info-field {
  margin-top: 10rpx;
  white-space: pre-wrap;
  word-break: break-all;
}

.name {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 28rpx;
  color: #333;
}

.pagination {
  text-align: center;
  margin-top: 20rpx;
}

button {
  background-color: #1aad19;
  color: white;
  border: none;
  padding: 10rpx 20rpx;
  border-radius: 10rpx;
  font-size: 28rpx;
  margin: 0 10rpx;
}

button:disabled {
  background-color: #cccccc;
}
/* 分页容器：固定在页面底部 */
.pagination-container {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #fff;
  padding: 20rpx 0;
  box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05);
  z-index: 999;
}

/* 水平排列按钮和文字 */
.pagination {
  display: flex;
  justify-content: space-around;
  align-items: center;
  text-align: center;
}

/* 按钮样式保持不变 */
button {
  background-color: #1aad19;
  color: white;
  border: none;
  padding: 10rpx 20rpx;
  border-radius: 10rpx;
  font-size: 28rpx;
  flex: 1;
  max-width: 200rpx;
  margin: 0 10rpx;
}

button:disabled {
  background-color: #cccccc;
}
</style>